<template>
  <div class="test_container">
    <div class="tm-button">
      <tm-button @click="fn" type="primary">添加</tm-button>
      <tm-button @click="fn" type="success">删除</tm-button>
      <tm-button @click="fn" type="warming">收藏</tm-button>
      <tm-button @click="fn" type="info">信息</tm-button>
      <tm-button @click="fn" type="danger">危险</tm-button>
      <tm-button @click="fn">默认</tm-button>
    </div>
    <div class="tm-button">
      <tm-button type="primary" plain>镂空</tm-button>
    </div>
    <div class="tm-button">
      <tm-button type="danger" circle disable>镂空</tm-button>
    </div>

    <div class="dialog">
      <tm-dialog
        :visible="visible"
        title="温馨提示"
        width="90%"
        top="50%"
        @handerClose="close"
      >
        <ol>
          <li>12</li>
          <li>12</li>
          <li>12</li>
        </ol>

        <template v-slot:footer>
          <tm-button @click="close">取消</tm-button>
          <tm-button @click="close" type="primary">确定</tm-button>
        </template>
      </tm-dialog>
    </div>

    <div class="content-1">
      <div class="text">
        <div class="com">
          起弟郭五极要判，明之不的人是永雷设燕应锐别春语，认恼于也撒，战哥服便子则价斗他互降赏上，融事一胜中上以自徒程仍可也找有文不友色，行乡落者锐份承，何后人勇词娘属读名却艳，家请将夫君你定令罪司实五，程她愿磊又得无颜斗秦，雷台骨斯一皇不，之到她上不着劫力，谢太。
        </div>
        <div class="icon">购买</div>
      </div>
    </div>
    <van-button type="primary">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    fn() {
      this.visible = true;
      console.log("12345678");
    },
    close(val) {
      if (typeof val == "boolean") {
        this.visible = val;
      } else {
        this.visible = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/.tm-button {
  margin-right: 20px;
}

.content-1 {
  width: 100%;
  padding: 12px 12px;
  color: red;
  font-size: 15px;
  height: 150px;
  border: 1px solid #ccc;
}
.content-1 .text {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.content-1 .text .com {
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
